<template>
  <view class="container">
    <u-sticky :zIndex="1" bgColor="#FFFFFF">
      <u-tabs
        :list="tabsItem"
        lineColor="#5D5D5D"
        lineWidth="69rpx"
        lineHeight="4rpx"
        activeStyle="font-size: 26rpx;color: #171717;line-height: 37rpx;"
        inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
        itemStyle="flex: 1;height: 100rpx;border-bottom: 1px solid #EEEEEE;"
        :current="tabsIndex"
        @change="handleChange"
        :scrollable="false"
      ></u-tabs>
    </u-sticky>
    <view class="coupon-ul" v-show="type === 'coupon'">
      <block v-for="(ticket,k) in ticketList" :key="k">
        <ticket-item :ticket="ticket" class="ticket"></ticket-item>
      </block>
      <view class="h-20"></view>
      <u-loadmore
        height="50rpx"
        :status="loadStatus"
        v-if="total > 8"
        marginTop="20rpx"
        marginBottom="20rpx"
        fontSize="32rpx"
        iconSize="34rpx"
        line
      />
    </view>
    <view class="first" v-show="type === 'priority'">
      <u-row gutter="22" customStyle="flex-wrap: wrap;">
        <u-col :span="6" v-for="(item, k) in priorityList" :key="k">
          <view class="first-logo"></view>
        </u-col>
      </u-row>
      <view class="h-20"></view>
      <u-loadmore
        height="50rpx"
        :status="loadPriorityStatus"
        v-if="priorityTotal > 8"
        marginTop="20rpx"
        marginBottom="20rpx"
        fontSize="32rpx"
        iconSize="34rpx"
        line
      />
    </view>
  </view>
</template>

<script>
import TicketItem from "@/components/TicketItem";
import { getUserTicketPage, getUserPriority } from "@/config/api";
export default {
  name: "index",
  components: {
    TicketItem,
  },
  data() {
    return {
      tabsItem: [
        {
          name: "优惠券",
          type: "coupon",
        },
        {
          name: "资格卡",
          type: "priority",
        },
      ],
      ticketList: [],
      total: 0,
      tabsIndex: 0,
      listQuery: {
        page: 1,
        list_rows: 10,
        column: "id",
        direction: "asc",
      },
      priorityQuery: {
        page: 1,
        list_rows: 10,
      },
      priorityList: [],
      priorityTotal: 0,
      type: "coupon",
    };
  },
  onLoad() {
    this.getTicketPage();
    this.getPriorityPage();
  },
  computed: {
    loadStatus() {
      if (this.total > this.ticketList.length) {
        return "loading";
      } else {
        return "nomore";
      }
    },
    loadPriorityStatus() {
      if (this.priorityTotal > this.priorityList.length) {
        return "loading";
      } else {
        return "nomore";
      }
    },
  },
  onReachBottom() {
    if (this.type === "coupon") {
      if (this.total > this.ticketList.length) {
        this.listQuery.page += 1;
        this.getTicketPage(true);
      }
    }
    if (this.type === "priority") {
      if (this.priorityTotal > this.priorityList.length) {
        this.priorityQuery.page += 1;
        this.getPriorityPage(true);
      }
    }
  },
  methods: {
    handleChange(item) {
      this.type = item.type;
    },
    async getTicketPage(more = false) {
      const res = await getUserTicketPage(this.listQuery);
      if (more) {
        this.ticketList = [...this.ticketList, ...res.items];
      } else {
        this.ticketList = res.items;
      }
      this.total = res.total;
    },
    async getPriorityPage(more = false) {
      const res = await getUserPriority(this.priorityQuery);
      if (more) {
        this.priorityList = [...this.priorityList, ...res.items];
      } else {
        this.priorityList = res.items;
      }
      this.priorityTotal = res.total;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .coupon-ul {
    padding: 25rpx 0;
    padding-left: 33rpx;
    padding-right: 19rpx;
    .ticket {
      padding-top: 40rpx;
    }
  }
  .first {
    padding: 17rpx;
    .first-logo {
      background: url("https://img.ionepin.com/52940e7675a87b315803f4d5fc6cd8c25cfecbf6.png")
        no-repeat;
      background-size: 100% 100%;
      width: 362rpx;
      height: 285rpx;
    }
  }
  .h-20 {
    height: 20rpx;
  }
}
</style>
